<template>
  <div class="global-box">
    <div class="learing-info">
      <div class="learing-title">基本信息</div>
      <a-form layout="inline">
        <a-row>
          <a-col :md="8" :sm="24">
            <a-form-item label="学习包名称"> {{ infoForm.studyPackageName }} </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="课程目录"> {{ infoForm.courseCatalog }} </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="学习包类型"> {{ infoForm.studyPackageType }} </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="学习包价格"> {{ infoForm.studyPackagePrice }} </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="学习包状态"> {{ infoForm.studyPackageStatus }} </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <div class="learing-title">学习包内容</div>
      <div class="learing-content">
        <a-form layout="inline">
          <a-row>
            <a-col :md="16" :sm="24">
              <a-form-item label="学习包系列"> {{ learningType }} </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="名称筛选" style="float: right">
                <a-input-search
                  placeholder="请输入"
                  v-model="learningName"
                  style="width: 200px"
                  @search="onSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-table
          :columns="columns"
          ref="table"
          :data-source="dataTable"
          :pagination="false"
          :rowKey="record => record.courseId"
          :scroll="{ y: height }"
        >
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleLook(record)">查看内容</a>
            </template>
          </span>
        </a-table>
      </div>
    </div>
    <view-drawer :dataDrawer="learningData" v-if="learningData.id !== ''" @closeBox="closeBox" />
  </div>
</template>
<script>
import { viewContent, viewInfo } from '@/api/product/learning'
import ViewDrawer from '@/views/product/viewDrawer'
export default {
  components: {
    ViewDrawer
  },
  data () {
    return {
      dataTable: [],
      columns: [],
      learningData: {
        visible: false,
        id: ''
      },
      height: 450,
      studyPackageId: '',
      infoForm: {},
      learningType: '',
      learningName: ''
    }
  },
  mounted () {
    if (this.$route.params.studyPackageId && this.$route.params.studyPackageId !== '') {
      this.studyPackageId = this.$route.params.studyPackageId
      this.getInfo()
      this.getContent()
    }
  },
  methods: {
    closeBox (v) {
      this.learningData = {
        visible: false,
        id: ''
      }
    },
    // 获取信息
    getInfo () {
      const data = {
        studyPackageId: this.studyPackageId
      }
      viewInfo(data).then(res => {
        if (res.code === '1') {
          this.infoForm = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取内容
    getContent () {
      const data = {
        studyPackageId: this.studyPackageId
      }
      if (this.learningName !== '') {
        data.name = this.learningName
      }
      viewContent(data).then(res => {
        if (res.code === '1') {
          if (res.data.studyPackageType === 1) {
            this.learningType = '课程'
            this.columns = [
              {
                title: '课程ID',
                dataIndex: 'courseId',
                align: 'center'
              },
              {
                title: '课程名称',
                dataIndex: 'courseName',
                align: 'center'
              },
              {
                title: '课程类型',
                dataIndex: 'courseTypeName',
                align: 'center'
              },
              {
                title: '课程属性',
                dataIndex: 'courseAttributeTypeName',
                align: 'center'
              },
              {
                title: '操作',
                dataIndex: 'action',
                scopedSlots: { customRender: 'action' },
                align: 'center'
              }
            ]
            this.dataTable = res.data.courseListDTOS
          }
          if (res.data.studyPackageType === 2) {
            this.learningType = '讲义'
            this.columns = [
              {
                title: '讲义ID',
                dataIndex: 'handoutId',
                align: 'center'
              },
              {
                title: '讲义标题',
                dataIndex: 'handoutName',
                align: 'center'
              },
              {
                title: '年份',
                dataIndex: 'year',
                align: 'center'
              },
              {
                title: '讲义状态',
                dataIndex: 'activeStatus',
                align: 'center'
              }
            ]
            this.dataTable = res.data.handoutContentDTOS
          }
          if (res.data.studyPackageType === 3) {
            this.learningType = '试卷'
            this.columns = [
              {
                title: '试卷ID',
                dataIndex: 'examPaperId',
                align: 'center'
              },
              {
                title: '试卷名称',
                dataIndex: 'examPaperName',
                align: 'center'
              },
              {
                title: '试卷类型',
                dataIndex: 'examPaperTypeName',
                align: 'center'
              },
              {
                title: '试卷状态',
                dataIndex: 'activeStatus',
                align: 'center'
              }
            ]
            this.dataTable = res.data.examPaperContentDTOS
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    onSearch () {
      this.getContent()
    },
    // 查看内容
    handleLook (record) {
      this.learningData.visible = true
      this.learningData.id = record.courseId
    }
  }
}
</script>
<style lang="less" scoped>
.learing-info {
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
  .ant-form {
    padding: 0 70px;
  }
}
.learing-title {
  padding: 30px 0 20px 45px;
  font-weight: bold;
  font-size: 18px;
}
.learing-content {
  padding: 0 70px;
}
</style>
